import React from 'react';
import "./index.scss";
import { Button, Segmented, Space } from 'antd';
import { AuthProvider } from '@/hooks/useAuth';
import AuthButton from '@/components/authButton';
import { useDispatch, useSelector } from 'react-redux';
import { toggleUserInfo } from '@/store/actions/userActions';

const PermissionDemo: React.FC = () => {
    const dispatch = useDispatch();
    const store = useSelector((state: any) => state.userinfo.userInfo);
    
    const [currentPermission, setCurrentPermission] = React.useState<string>(store.role || "admin");
    return (
        <Space direction="vertical" size={20}>
            <h3>权限示例</h3>
            <h2>当前权限：{currentPermission}</h2>
            <Segmented<string>
                options={['admin', 'user']}
                value={currentPermission}
                onChange={(value) => {
                    setCurrentPermission(value);
                    dispatch(toggleUserInfo({ ...store, role: value }))
                    localStorage.setItem("auth", JSON.stringify({ ...store, role: value }))
                }}
            />
            <div>
                <AuthProvider permissions={[currentPermission]}>
                    <Space direction='horizontal' size={20}>
                        <AuthButton permission={["admin"]}>
                            <Button>仅Admin可见</Button>
                        </AuthButton>
                        <AuthButton permission={["admin", "user"]}>
                            <Button>admin、user可见</Button>
                        </AuthButton>
                    </Space>
                </AuthProvider>
            </div>
        </Space>
    )
}

export default PermissionDemo;